import React from 'react'
import ReactDOM from 'react-dom'

//无论是function组建，还是class组建，他们props中的属性都是只读的
//class创建的组建有私有数据和生命周期，funciton组件都没有
class Movie extends React.Component{
    constructor(){
        super()
        //只有调用了super()之后才能使用this关键字,相当于vue中的data(){return{}}
        this.state = {
            msg: 'hello,state'
        }
        //msg的值可读可写
    }
    render(){
        //在class关键字创建的组件，如果想使用外界props传来的参数，不需要接收，直接this.props.XXX即可
    return <div>movie--{this.props.name}--{this.props.age}
    <hr/>
    {this.state.msg}
    </div>
    }
}
const user = {
    name : 'zs',
    age : 11
}
ReactDOM.render(<div>
    123
    {/* 这里的Movie标签，其实就是Movie类的一个实例对象 */}
    <Movie {...user}></Movie>
</div>,document.getElementById('app'))